<!--
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>My Cart · Soro</title>
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }



        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
            padding-top: 20px;
        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/
        /*footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }*/
        footer {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            transition: transform .3s ease-in-out;
            border-top: 1px solid #ededed;
            background-color: #fff;
            letter-spacing: .5px;
            position: relative;
            z-index: 90;
            padding: 50px 60px;
        }

        .d-sm-flex {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex!important;
            flex-wrap: nowrap!important;
            justify-content: space-between!important;
        }

        .ps-footer__main {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        .p-div {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            min-height: 32px;
            margin-bottom: 30px;
        }

        .p-list {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: flex-start;
        }

        .p-list__item {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            list-style: none;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            padding: 0 15px;
            white-space: nowrap;
            padding-left: 0;
        }

        .ps-footer__extra {
            padding-right: 35px;
        }



        /*上面是footer*/

        .part1_item {
            display: inline-block;
        }

        .bar_item {
            display: inline-block;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            cursor: pointer;
            float: left;
            height: 50px;
            line-height: 50px;
            padding-left: 5px;
        }

        .bar-right {
            display: inline-block;
        }

        .cart_main {
            width: 1200px;
            padding: 30px 250px;
        }

        .control-bar {
            width: 1200px;
            padding: 0 250px;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            position: relative;
            height: 50px;
        }

        .control-bar-inner {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            background: #e5e5e5;
            height: 50px;
            overflow: hidden;
        }

        .select-all1 {
            width: 80px;
        }

        .th-item {
            padding-left: 90px;
            width: 220px;
        }

        .info {
            width: 220px;
        }

        .price {
            padding-left: 10px;
            width: 130px;
        }

        .amount {
            padding-left: 10px;
            width: 120px;
        }

        .sum {
            width: 140px;
        }

        .op {
            width: 127px;
            padding-left: 30px;
        }

        .select-all2 {
            padding-left: 5px;
            width: 60px;
        }

        .delete-selected {
            width: 50px;
            margin-left: 25px;
        }

        .bar-right {
            float: right;
            width: 430px;
            padding-left: 20px;
        }

        .show-selected-items {
            width: 100px;
        }

        .part1 {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            color: #3c3c3c;
        }

        .part2 {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            border: 1px solid #ccc;
        }

        .price-sum {
            width: 200px;
        }

        .btn {
            width: 114px;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            display: inline-block;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-family: 'Lantinghei SC', 'Microsoft Yahei', serif;
            font-size: 20px;
            border-radius: 2px;
            background: #B0B0B0;
            color: #fff;
            border-left: 1px solid #e7e7e7;
            text-decoration: none;
        }

        .item-content {
            padding: 0;
            margin: 0;
        }

        .cart-checkbox {
            vertical-align: center;
            height: 80px;
            width: 50px;
        }

        .cart-checkbox label {
            position: relative;
            left: 20px;
        }

        .item {
            height: 120px;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            background: #fcfcfc;
            border-bottom: 1px solid #e7e7e7;
        }

        .item-content li {
            display: inline-block;
            vertical-align: top;
            padding-top: 20px;
        }

        .item-content li div {
            display: inline-block;
            vertical-align: top;
        }

        .item-pic {
            width: 80px;
            height: 80px;
        }

        .item-pic-frame {
            width: 80px;
            height: 80px;
            /*background-image: url("../static/雪屋-白-600x600.jpg");*/
            background-size: 80px 80px;
        }

        .basic-info {
            margin-left: 35px;
            height: 90px;
            width: 230px;
        }

        .item-price {
            padding-top: 5px;
            width: 140px;
        }

        .item-amount {
            padding-top: 5px;
            margin: 0 10px;
            width: 100px;
        }

        .item-sum {
            padding-top: 5px;
            width: 140px;
        }

        .item-op {
            padding-left: 30px;
        }

        .item-info {
            width: 220px;
        }

        .blank {
            height: 100px;
        }
    </style>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script th:inline="javascript">

        window.onload = function (ev) {
            var btn = $("#all");
            var checkbox = $(".selectBtn");
            var buy = document.getElementById("buy-btn");
            var totalPrice = 0;
            btn.click(function () {
                checkbox.each(function () {
                    this.checked = btn.checked;
                    totalPrice += this.parent().parent().parent().find(".price").text();
                });
                    $("#totalPrice").text(totalPrice);
            });

            buy.onclick = function () {
                buy.href = "/buy?str=";

                for (var i = 0; i < checkbox.length; i++) {
                    if(checkbox[i].checked) {
                        buy.href += checkbox[i].value + ",";
                    }
                }
            }

        };

        function deleteItem(obj) {
            obj.setAttribute("href", "/remove_item?productId=" + obj.getAttribute("value"));
        }
    </script>
</head>
<body>
<header class="header">
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">登录</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="control-bar">
        <div class="control-bar-inner">
            <div class="bar_item">
                <div class="select-all2">
                </div>
            </div>

            <div class="bar_item">
                <div class="delete-selected">全部商品</div>
            </div>
            <div class="bar-right">
                <div class="bar_item">
                    <div class="show-selected-items">已选商品0件</div>
                </div>
                <div class="bar_item">
                    <div class="price-sum">合计（不含运费）:0.00</div>
                </div>
                <div class="bar_item">
                    <a class="btn">结算</a>
                </div>
            </div>
        </div>
    </div>
    <div class="cart_main">
        <div class="part1">
            <div class="part1_item">
                <div class="select-all1"><label>
                    <input class="selectAll" id="all" type="checkbox">
                </label>全选
                </div>
            </div>
            <div class="part1_item">
                <div class="th-item">商品信息</div>
            </div>

            <div class="part1_item">
                <div class="info"></div>
            </div>
            <div class="part1_item">
                <div class="price">单价</div>
            </div>
            <div class="part1_item">
                <div class="amount">数量</div>
            </div>
            <div class="part1_item">
                <div class="sum">金额</div>
            </div>
            <div class="part1_item">
                <div class="op">操作</div>
            </div>
        </div>
        <div class="part2">
            <div th:each="cartItem, cartItemStat: ${cartItems}">
                <div class="item">
                    <ul class="item-content">

                        <li>
                            <div class="cart-checkbox">
                                <input class="selectBtn" type="checkbox" th:value="${products.get(cartItemStat.index).getId()}">
                            </div>
                        </li>
                        <li>
                            <div class="item-pic">
                                <img class="item-pic-frame"
                                     th:src="'../static/' + ${products.get(cartItemStat.index).getName()} + '.jpg'" alt=""/>
                            </div>
                            <div class="basic-info" th:text="${products.get(cartItemStat.index).getName()}"></div>
                        </li>
                        <li>
                            <div class="item-info">
                                <span>商品详情：</span>
                                <span th:text="${products.get(cartItemStat.index).getDetails()}"></span>
                            </div>
                        </li>
                        <li>
                            <div class="item-price">
                                &yen;<span th:text="${products.get(cartItemStat.index).getPrice()}"></span>
                            </div>
                        </li>
                        <li>
                            <div class="item-amount"><span th:text="${cartItem.getAmount()}"></span></div>
                        </li>
                        <li>
                            <div class="item-sum">
                                <span>&yen;</span><span class="price" th:text="${cartItem.getTotalPrice()}">80.00</span></div>
                        </li>
                        <li>
                            <div class="item-op">
                                <div class="dl"><a href="javascript:void(0);" class="delete-btn"
                                                   th:value="${products.get(cartItemStat.index).getId()}"
                                                   onclick="deleteItem(this)">删除</a></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="control-bar">
        <div class="control-bar-inner">
            <div class="bar_item">
                <div class="select-all2"><label>
                    <input class="selectAll" id="all1" type="checkbox">
                </label>全选
                </div>
            </div>

            <div class="bar_item">
                <div class="delete-selected">删除</div>
            </div>
            <div class="bar-right">
                <div class="bar_item">
                    <div class="show-selected-items">已选商品0件</div>
                </div>
                <div class="bar_item">
                    <div class="price-sum">合计（不含运费）:<span id="totalPrice">0.00</span></div>
                </div>
                <div class="bar_item">
                    <a class="btn" id="buy-btn" href="javascript:void(0);">结算</a>
                </div>
            </div>
        </div>
    </div>
    <div class="blank"></div>
</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活	Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div"><ul class="p-list">
                <li class="p-list__item">
                    <a href="/">首页</a>
                </li>
                <li class="p-list__item">
                    <a href="/shop">产品</a>
                </li>
                <li class="p-list__item">
                    <a href="/appointment">上门预约</a>
                </li>
                <li class="p-list__item">
                    <a href="/about">关于我们</a>
                </li>
                <li class="p-list__item">
                    <a href="/join">注册</a>
                </li>
                <li class="p-list__item">
                    <a href="/cart">购物车</a>
                </li>
                <li class="p-list__item ps-lang">
                    <a href="/personal">个人中心</a>
                </li>
            </ul> </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro Co.,Ltd. 瘦肉宠物用品（广东）有限公司</div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>
</html>-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>My Cart · Soro</title>
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }



        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
            padding-top: 20px;
        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/
        /*footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }*/
        footer {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            transition: transform .3s ease-in-out;
            border-top: 1px solid #ededed;
            background-color: #fff;
            letter-spacing: .5px;
            position: relative;
            z-index: 90;
            padding: 50px 60px;
        }

        .d-sm-flex {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex!important;
            flex-wrap: nowrap!important;
            justify-content: space-between!important;
        }

        .ps-footer__main {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        .p-div {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            min-height: 32px;
            margin-bottom: 30px;
        }

        .p-list {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: flex-start;
        }

        .p-list__item {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            list-style: none;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            padding: 0 15px;
            white-space: nowrap;
            padding-left: 0;
        }

        .ps-footer__extra {
            padding-right: 35px;
        }



        /*上面是footer*/

        .part1_item {
            display: inline-block;
        }

        .bar_item {
            display: inline-block;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            cursor: pointer;
            float: left;
            height: 50px;
            line-height: 50px;
            padding-left: 5px;
        }

        .bar-right {
            display: inline-block;
        }

        .cart_main {
            width: 1200px;
            padding: 30px 250px;
        }

        .control-bar {
            width: 1200px;
            padding: 0 250px;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            position: relative;
            height: 50px;
        }

        .control-bar-inner {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            background: #e5e5e5;
            height: 50px;
            overflow: hidden;
        }

        .select-all1 {
            width: 80px;
        }

        .th-item {
            padding-left: 90px;
            width: 220px;
        }

        .info {
            width: 220px;
        }

        .price {
            padding-left: 10px;
            width: 130px;
        }

        .amount {
            padding-left: 10px;
            width: 120px;
        }

        .sum {
            width: 140px;
        }

        .op {
            width: 127px;
            padding-left: 30px;
        }

        .select-all2 {
            padding-left: 5px;
            width: 60px;
        }

        .delete-selected {
            width: 50px;
            margin-left: 25px;
        }

        .bar-right {
            float: right;
            width: 430px;
            padding-left: 20px;
        }

        .show-selected-items {
            width: 100px;
        }

        .part1 {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            color: #3c3c3c;
        }

        .part2 {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            border: 1px solid #ccc;
        }

        .price-sum {
            width: 200px;
        }

        .btn {
            width: 114px;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            display: inline-block;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-family: 'Lantinghei SC', 'Microsoft Yahei', serif;
            font-size: 20px;
            border-radius: 2px;
            background: #B0B0B0;
            color: #fff;
            border-left: 1px solid #e7e7e7;
            text-decoration: none;
        }

        .item-content {
            padding: 0;
            margin: 0;
        }

        .cart-checkbox {
            vertical-align: center;
            height: 80px;
            width: 50px;
        }

        .cart-checkbox label {
            position: relative;
            left: 20px;
        }

        .item {
            height: 120px;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            background: #fcfcfc;
            border-bottom: 1px solid #e7e7e7;
        }

        .item-content li {
            display: inline-block;
            vertical-align: top;
            padding-top: 20px;
        }

        .item-content li div {
            display: inline-block;
            vertical-align: top;
        }

        .item-pic {
            width: 80px;
            height: 80px;
        }

        .item-pic-frame {
            width: 80px;
            height: 80px;
            /*background-image: url("../static/雪屋-白-600x600.jpg");*/
            background-size: 80px 80px;
        }

        .basic-info {
            margin-left: 35px;
            height: 90px;
            width: 230px;
        }

        .item-price {
            padding-top: 5px;
            width: 140px;
        }

        .item-amount {
            padding-top: 5px;
            margin: 0 10px;
            width: 100px;
        }

        .item-sum {
            padding-top: 5px;
            width: 140px;
        }

        .item-op {
            padding-left: 30px;
        }

        .item-info {
            width: 220px;
        }

        .blank {
            height: 100px;
        }
    </style>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script th:inline="javascript">

        window.onload = function (ev) {
            var btn = document.getElementById("all");
            var checkbox = document.getElementsByName("abc");
            var price = document.getElementsByName("price");
            var buy = document.getElementById("buy-btn");
            var totalPrice = "";
            btn.onclick = function () {
                for (var i = 0; i < checkbox.length; i++) {
                    checkbox[i].checked = btn.checked;
                    /*totalPrice += parseFloat(price[i].text);*/
                }
                $("#totalPrice").text(price.text);
            };

            buy.onclick = function () {
                buy.href = "/buy?str=";

                for (var i = 0; i < checkbox.length; i++) {
                    if(checkbox[i].checked) {
                        buy.href += checkbox[i].value + ",";
                    }
                }
            }
        };

        function deleteItem(obj) {
            obj.setAttribute("href", "/remove_item?productId=" + obj.getAttribute("value"));
        }
    </script>
</head>
<body>
<header class="header">
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">登录</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="control-bar">
        <div class="control-bar-inner">
            <div class="bar_item">
                <div class="select-all2">
                </div>
            </div>

            <div class="bar_item">
                <div class="delete-selected">全部商品</div>
            </div>
            <div class="bar-right">
                <div class="bar_item">
                    <div class="show-selected-items">已选商品0件</div>
                </div>
                <div class="bar_item">
                    <div class="price-sum">合计（不含运费）:0.00</div>
                </div>
                <div class="bar_item">
                    <a class="btn">结算</a>
                </div>
            </div>
        </div>
    </div>
    <div class="cart_main">
        <div class="part1">
            <div class="part1_item">
                <div class="select-all1"><label>
                    <input class="selectAll" id="all" type="checkbox">
                </label>全选
                </div>
            </div>
            <div class="part1_item">
                <div class="th-item">商品信息</div>
            </div>

            <div class="part1_item">
                <div class="info"></div>
            </div>
            <div class="part1_item">
                <div class="price">单价</div>
            </div>
            <div class="part1_item">
                <div class="amount">数量</div>
            </div>
            <div class="part1_item">
                <div class="sum">金额</div>
            </div>
            <div class="part1_item">
                <div class="op">操作</div>
            </div>
        </div>
        <div class="part2">
            <div th:each="cartItem, cartItemStat: ${cartItems}">
                <div class="item">
                    <ul class="item-content">

                        <li>
                            <div class="cart-checkbox"><label>
                                <input class="selectBtn" name="abc" type="checkbox" th:value="${products.get(cartItemStat.index).getId()}">
                            </label>
                            </div>
                        </li>
                        <li>
                            <div class="item-pic">
                                <img class="item-pic-frame"
                                     th:src="'../static/' + ${products.get(cartItemStat.index).getName()} + '.jpg'" alt=""/>
                            </div>
                            <div class="basic-info" th:text="${products.get(cartItemStat.index).getName()}"></div>
                        </li>
                        <li>
                            <div class="item-info">
                                <span>商品详情：</span>
                                <span th:text="${products.get(cartItemStat.index).getDetails()}"></span>
                            </div>
                        </li>
                        <li>
                            <div class="item-price">
                                &yen;<span th:text="${products.get(cartItemStat.index).getPrice()}"></span>
                            </div>
                        </li>
                        <li>
                            <div class="item-amount"><span th:text="${cartItem.getAmount()}"></span></div>
                        </li>
                        <li>
                            <div class="item-sum">
                                <span>&yen;</span><span name="price" class="price" th:text="${cartItem.getTotalPrice()}">80.00</span></div>
                        </li>
                        <li>
                            <div class="item-op">
                                <div class="dl"><a href="javascript:void(0);" class="delete-btn"
                                                   th:value="${products.get(cartItemStat.index).getId()}"
                                                   onclick="deleteItem(this)">删除</a></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="control-bar">
        <div class="control-bar-inner">
            <div class="bar_item">
                <div class="select-all2"><label>
                    <input class="selectAll" id="all1" type="checkbox">
                </label>全选
                </div>
            </div>

            <div class="bar_item">
                <div class="delete-selected">删除</div>
            </div>
            <div class="bar-right">
                <div class="bar_item">
                    <div class="show-selected-items">已选商品0件</div>
                </div>
                <div class="bar_item">
                    <div class="price-sum">合计（不含运费）:<span id="totalPrice">0.00</span></div>
                </div>
                <div class="bar_item">
                    <a class="btn" id="buy-btn" href="javascript:void(0);">结算</a>
                </div>
            </div>
        </div>
    </div>
    <div class="blank"></div>
</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活	Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div"><ul class="p-list">
                <li class="p-list__item">
                    <a href="/">首页</a>
                </li>
                <li class="p-list__item">
                    <a href="/shop">产品</a>
                </li>
                <li class="p-list__item">
                    <a href="/appointment">上门预约</a>
                </li>
                <li class="p-list__item">
                    <a href="/about">关于我们</a>
                </li>
                <li class="p-list__item">
                    <a href="/join">注册</a>
                </li>
                <li class="p-list__item">
                    <a href="/cart">购物车</a>
                </li>
                <li class="p-list__item ps-lang">
                    <a href="/personal">个人中心</a>
                </li>
            </ul> </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro Co.,Ltd. 瘦肉宠物用品（广东）有限公司</div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>
</html>